<template>
  <div>
    <v-chart
      class="chart"
      :style="`height:${height}px`"
      :option="chart"
      autoresize
    />
  </div>
</template>

<script>
const xAxis = [
  {
    name: "月",
    type: "category",
    axisTick: {
      alignWithLabel: true,
    },
    // prettier-ignore
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  },
];
const yAxis = [
  {
    name: "小时",
    position: "left",
    alignTicks: true,
    minInterval: 1,
    axisLine: {
      show: true,
    },
    axisLabel: {
      formatter: "{value} ",
    },
  },
];
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
// 引入vue-echarts
import VChart from "vue-echarts";
// 标准作业线
export default {
  name: "Bwlyl",
  components: { VChart },
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    height: {
      type: [String, Number],
      default() {
        return "250";
      },
    },
  },
  data() {
    return {
      diosho: false,
      iframeTitle: "",
      iframeSrc: "",
      tabledata: [],
      chart: {
        color: ["#91CC75", "#73C0DE", "#FAC858", "#EE6666", "#7E9AD7"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["9号", "10号", "14号"],
        },
        xAxis,
        yAxis,
        series: [],
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.chart.tooltip.formatter = (p) => this.formatter(p, "小时");
      this.$api.summary.get_berthlvy().then((val) => {
        const obj = [
          {
            name: "9号",
            type: "line",
            data: this.mapNull(val["9hbw"], "SHICHANG"),
          },
          {
            name: "10号",
            type: "line",
            data: this.mapNull(val["10hbw"], "SHICHANG"),
          },
          {
            name: "14号",
            type: "line",
            data: this.mapNull(val["14hbw"], "SHICHANG"),
          },
        ];
        this.chart.series = obj;
      });
    },
    formatter(params, unit) {
      let relVal = params[0].name + "月";
      for (let i = 0, l = params.length; i < l; i++) {
        relVal += "<br/>" + params[i].marker;
        let v = "";
        if (params[i].value) {
          v = `${params[i].seriesName} ：${this.$utils.roundFun(params[i].value,2)}  ${unit}`;
        } else {
          v = "-";
        }
        relVal += v;
      }
      return relVal;
    },
    mapNull(data, filed) {
      return data.map((t) => {
        if (t[filed] === "0") {
          return "";
        }
        return t[filed];
      });
    },
  },
};
</script>

<style lang="scss"></style>
